<template>
  <!-- <el-card shadow="hover"> -->
  <div class="manned-load-table">
    <el-button title="切换展示形式" style="transform: rotate(90deg);margin-bottom: 10px;" type="primary" :icon="Sort" circle @click="checkTableStyle" />
    <div v-if="tableShow" id="myElement" style="width: 100%;height: calc(100vh - 138px)"></div>
  </div>
    
  <!-- </el-card> -->
</template>
<script setup>
import {
  Sort
} from '@element-plus/icons-vue'
import * as VTable from '@visactor/vtable';
import VChart from '@visactor/vchart';
VTable.register.chartModule('vchart', VChart);
import { getMannedLoadList } from '@/api/mannedLoad';
const myElement = ref(null); 
const queryParams = ref({
  pageNum: 1,
  pageSize: 9999
})
const total = ref(0)
const tableStyle = ref('chart')
const tableShow = ref(true)
let records = ref([
  
]);


const columns = ref([
  {
    field: 'no',
    title: '编号',
    cellType: 'link',
    templateLink: 'https://www.google.com.hk/search?q={name}',
    linkJump: true,
    headerStyle:{
      textAlign:'center'
    },
    width:80
  },
  {
    field: 'g',
    title: '重量（kg）',
    width: 150,
    headerStyle:{
      textAlign:'center'
    },
    cellType: 'text'
  },
  {
    field: 'full name',
    title: '重心（m）',
    headerStyle:{
      textAlign:'center'
    },
    columns: [
      {
        field: 'x',
        title: 'X',
        cellType: 'text',
        headerStyle:{
          textAlign:'center'
        },
        width:100
      },
      {
        field: 'y',
        title: 'Y',
        cellType: 'text', // 'image',
        headerStyle:{
          textAlign:'center'
        },
        width:100,
      },
      {
        field: 'z',
        title: 'Z',
        cellType: 'text', // 'video',
        headerStyle:{
          textAlign:'center'
        },
        width:100,
        // imageSizing : 'keep-aspect-ratio',
      },
    ]
  },
  {
    field: 'full name',
    title: '惯量（kg*m2）',
    headerStyle:{
      textAlign:'center'
    },
    columns: [
      {
        field: 'ixx',
        title: 'lxx',
        cellType: 'text',
        headerStyle:{
          textAlign:'center'
        },
        width:100
      },
      {
        field: 'iyy',
        title: 'lyy',
        cellType: 'text',
        headerStyle:{
          textAlign:'center'
        },
        width:100
      },
      {
        field: 'ixz',
        title: 'lxz',
        cellType: 'text',
        headerStyle:{
          textAlign:'center'
        },
        width:100
      },
      {
        field: 'iyz',
        title: 'lyz',
        cellType: 'text',
        headerStyle:{
          textAlign:'center'
        },
        width:100
      },
      {
        field: 'ixy',
        title: 'lxy',
        cellType: 'text',
        headerStyle:{
          textAlign:'center'
        },
        width:100
      },
      {
        field: 'izz',
        title: 'lzz',
        cellType: 'text',
        headerStyle:{
          textAlign:'center'
        },
        width:100
      },
    ]
  }
]);

const columns1 = ref([
  // {
  //   field: 'no',
  //   title: '编号',
  //   cellType: 'link',
  //   templateLink: 'https://www.google.com.hk/search?q={name}',
  //   linkJump: true,
  //   width:80
  // },
  {
    field: 'g',
    title: '重量（kg）',
    width: '1000',
    cellType: 'chart',
    chartModule: 'vchart',
    headerStyle: {
      textAlign: 'center'
    },
    chartSpec(args) {
      if (args.row % 3 == 2)
        return {
          type: 'area',
          data: {
            id: 'data'
          },
          xField: 'x',
          yField: 'y',
          seriesField: 'type',
          point: {
            style: {
              fillOpacity: 1,
              stroke: '#000',
              strokeWidth: 4
            },
            state: {
              hover: {
                fillOpacity: 0.5,
                stroke: 'blue',
                strokeWidth: 2
              },
              selected: {
                fill: 'red'
              }
            }
          },
          area: {
            style: {
              fillOpacity: 0.3,
              stroke: '#000',
              strokeWidth: 4
            },
            state: {
              hover: {
                fillOpacity: 1
              },
              selected: {
                fill: 'red',
                fillOpacity: 1
              }
            }
          },
          line: {
            state: {
              hover: {
                stroke: 'red'
              },
              selected: {
                stroke: 'yellow'
              }
            }
          },

          axes: [
            {
              orient: 'left',
              range: {
                min: 0
              }
            },
            {
              orient: 'bottom',
              label: {
                visible: true
              },
              type: 'band'
            }
          ],
          legends: [
            {
              visible: true,
              orient: 'bottom'
            }
          ]
        };
      else if (args.row % 3 == 1)
        return {
          type: 'common',
          series: [
            {
              type: 'line',
              data: {
                id: 'data'
              },
              xField: 'x',
              yField: 'y',
              seriesField: 'type',
              line: {
                state: {
                  hover: {
                    strokeWidth: 4
                  },
                  selected: {
                    stroke: 'red'
                  },
                  hover_reverse: {
                    stroke: '#ddd'
                  }
                }
              },
              point: {
                state: {
                  hover: {
                    fill: 'red'
                  },
                  selected: {
                    fill: 'yellow'
                  },
                  hover_reverse: {
                    fill: '#ddd'
                  }
                }
              },
              legends: [
                {
                  visible: true,
                  orient: 'bottom'
                }
              ]
            }
          ],
          axes: [
            {
              orient: 'left',
              range: {
                min: 0
              }
            },
            {
              orient: 'bottom',
              label: {
                visible: true
              },
              type: 'band'
            }
          ],
          legends: [
            {
              visible: true,
              orient: 'bottom'
            }
          ]
        };
        return {
          type: 'pie',
          data: { id: 'data1' },
          categoryField: 'y',
          valueField: 'x'
        }
    }
  },
  {
    field: 'm',
    title: '重心（m）',
    width: '1000',
    cellType: 'chart',
    chartModule: 'vchart',
    headerStyle: {
      textAlign: 'center'
    },
    chartSpec(args) {
      if (args.row % 3 == 2)
        return {
          type: 'area',
          data: {
            id: 'data'
          },
          xField: 'x',
          yField: 'y',
          seriesField: 'type',
          point: {
            style: {
              fillOpacity: 1,
              stroke: '#000',
              strokeWidth: 4
            },
            state: {
              hover: {
                fillOpacity: 0.5,
                stroke: 'blue',
                strokeWidth: 2
              },
              selected: {
                fill: 'red'
              }
            }
          },
          area: {
            style: {
              fillOpacity: 0.3,
              stroke: '#000',
              strokeWidth: 4
            },
            state: {
              hover: {
                fillOpacity: 1
              },
              selected: {
                fill: 'red',
                fillOpacity: 1
              }
            }
          },
          line: {
            state: {
              hover: {
                stroke: 'red'
              },
              selected: {
                stroke: 'yellow'
              }
            }
          },

          axes: [
            {
              orient: 'left',
              range: {
                min: 0
              }
            },
            {
              orient: 'bottom',
              label: {
                visible: true
              },
              type: 'band'
            }
          ],
          legends: [
            {
              visible: true,
              orient: 'bottom'
            }
          ]
        };
      else if (args.row % 3 == 1)
        return {
          type: 'common',
          series: [
            {
              type: 'line',
              data: {
                id: 'data'
              },
              xField: 'x',
              yField: 'y',
              seriesField: 'type',
              line: {
                state: {
                  hover: {
                    strokeWidth: 4
                  },
                  selected: {
                    stroke: 'red'
                  },
                  hover_reverse: {
                    stroke: '#ddd'
                  }
                }
              },
              point: {
                state: {
                  hover: {
                    fill: 'red'
                  },
                  selected: {
                    fill: 'yellow'
                  },
                  hover_reverse: {
                    fill: '#ddd'
                  }
                }
              },
              legends: [
                {
                  visible: true,
                  orient: 'bottom'
                }
              ]
            }
          ],
          axes: [
            {
              orient: 'left',
              range: {
                min: 0
              }
            },
            {
              orient: 'bottom',
              label: {
                visible: true
              },
              type: 'band'
            }
          ],
          legends: [
            {
              visible: true,
              orient: 'bottom'
            }
          ]
        };
        return {
          type: 'pie',
          data: { id: 'data1' },
          categoryField: 'y',
          valueField: 'x'
        }
    }
  },
  {
    field: 'kgm2',
    title: '惯量（kg*m2）',
    width: '1000',
    cellType: 'chart',
    chartModule: 'vchart',
    headerStyle: {
      textAlign: 'center'
    },
    chartSpec(args) {
      if (args.row % 3 == 2)
        return {
          type: 'area',
          data: {
            id: 'data'
          },
          xField: 'x',
          yField: 'y',
          seriesField: 'type',
          point: {
            style: {
              fillOpacity: 1,
              stroke: '#000',
              strokeWidth: 4
            },
            state: {
              hover: {
                fillOpacity: 0.5,
                stroke: 'blue',
                strokeWidth: 2
              },
              selected: {
                fill: 'red'
              }
            }
          },
          area: {
            style: {
              fillOpacity: 0.3,
              stroke: '#000',
              strokeWidth: 4
            },
            state: {
              hover: {
                fillOpacity: 1
              },
              selected: {
                fill: 'red',
                fillOpacity: 1
              }
            }
          },
          line: {
            state: {
              hover: {
                stroke: 'red'
              },
              selected: {
                stroke: 'yellow'
              }
            }
          },

          axes: [
            {
              orient: 'left',
              range: {
                min: 0
              }
            },
            {
              orient: 'bottom',
              label: {
                visible: true
              },
              type: 'band'
            }
          ],
          legends: [
            {
              visible: true,
              orient: 'bottom'
            }
          ]
        };
      else if (args.row % 3 == 1)
        return {
          type: 'common',
          series: [
            {
              type: 'line',
              data: {
                id: 'data'
              },
              xField: 'x',
              yField: 'y',
              seriesField: 'type',
              line: {
                state: {
                  hover: {
                    strokeWidth: 4
                  },
                  selected: {
                    stroke: 'red'
                  },
                  hover_reverse: {
                    stroke: '#ddd'
                  }
                }
              },
              point: {
                state: {
                  hover: {
                    fill: 'red'
                  },
                  selected: {
                    fill: 'yellow'
                  },
                  hover_reverse: {
                    fill: '#ddd'
                  }
                }
              },
              legends: [
                {
                  visible: true,
                  orient: 'bottom'
                }
              ]
            }
          ],
          axes: [
            {
              orient: 'left',
              range: {
                min: 0
              }
            },
            {
              orient: 'bottom',
              label: {
                visible: true
              },
              type: 'band'
            }
          ],
          legends: [
            {
              visible: true,
              orient: 'bottom'
            }
          ]
        };
        return {
          type: 'pie',
          data: { id: 'data1' },
          categoryField: 'y',
          valueField: 'x'
        }
    }
  }
]);

// 列表查询
const getList = (type) => {
  tableShow.value = false;
  getMannedLoadList(queryParams.value).then((res) => {
    const { rows, total } = res;
    records.value = [];
    if (type == 'table') {
      records.value = rows
    } else if (type == 'chart') {
      let gData = []
      let xData = []
      let yData = []
      let zData = []
      let ixxData = []
      let iyyData = []
      let ixzData = []
      let iyzData = []
      let ixyData = []
      let izzData = []
      for (let i = 0; i < total; i++) {
        gData.push({x: rows[i].no,type: 'g',y: rows[i].g})
        xData.push({x: rows[i].no,type: 'x',y: rows[i].x})
        yData.push({x: rows[i].no,type: 'y',y: rows[i].y})
        zData.push({x: rows[i].no,type: 'z',y: rows[i].z})
        ixxData.push({x: rows[i].no,type: 'ixx',y: rows[i].ixx})
        iyyData.push({x: rows[i].no,type: 'iyy',y: rows[i].iyy})
        ixzData.push({x: rows[i].no,type: 'ixz',y: rows[i].ixz})
        iyzData.push({x: rows[i].no,type: 'iyz',y: rows[i].iyz})
        ixyData.push({x: rows[i].no,type: 'ixy',y: rows[i].ixy})
        izzData.push({x: rows[i].no,type: 'izz',y: rows[i].izz})
      }
      records.value.push({
          g: gData,
          m: [
            ...xData,
            ...yData,
            ...zData
          ],
          kgm2: [
            ...ixxData,
            ...iyyData,
            ...ixzData,
            ...iyzData,
            ...ixyData,
            ...izzData
          ]
        })
    }

    const option = {
      records:records.value,
      columns: type == 'chart' ? columns1.value : columns.value,
      transpose: false,
      defaultColWidth: type == 'chart' ? 1100 : 100,
      defaultRowHeight: type == 'chart' ? 500 : 50,
      defaultHeaderRowHeight: 50,
    };
    console.log(option, 'option')
    tableShow.value = true;
    nextTick(() => {
      const tableInstance = new VTable.ListTable(document.querySelector('#myElement'), option);  
      window['tableInstance'] = tableInstance;  
    })
    
    // const {
    //   CLICK_CELL,
    // } = VTable.ListTable.EVENT_TYPE;
    // tableInstance.on(CLICK_CELL, (...args) => {
    //   console.log(CLICK_CELL, args)
    // });
    
    
  })
} 

const checkTableStyle = () => {
  if (tableStyle.value == 'table') {
    tableStyle.value = 'chart'
  } else {
    tableStyle.value = 'table'
  }
  console.log(tableStyle.value, 'option')
  getList(tableStyle.value)
  
}

// 创建 VTable 实例
onMounted(async ()=>{
  getList(tableStyle.value);  
  // const tableInstance = new VTable.ListTable(document.querySelector('#myElement'), option.value);  
  // window['tableInstance'] = tableInstance;  
})

</script>